import { createRenderer } from "@vue/runtime-core";
import { Graphics, Text, Sprite, Container, Texture } from "pixi.js";

// node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js
// const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options;
const renderer = createRenderer({
	// 从根组件的虚拟结点 vnode 中创建真实 DOM
	// createElement(type) {
	// 	// type 从虚拟结点 vnode 处获得
	// 	console.log(type);

	// 	let element;
	// 	if (type == "rect") {
	// 		// 创建一个矩形元素
	// 		element = new Graphics()
	// 		element.beginFill(0xff0000);
	// 		element.drawRect(0, 0, 500, 500);
	// 		element.endFill()
	// 	} else if (type == "circle") {
	// 		// 创建圆
	// 		element = new Graphics()
	// 		element.beginFill(0xffff00);
	// 		element.drawCircle(0, 0, 50);
	// 		element.endFill()
	// 	} else if (type == "sprite") {
	// 		// 创建精灵图——注意目录现在是在 dist 下,不需要 file-loader 也加载了图片
	// 		element = Sprite.from("./resource/sprite/飞机.png")
	// 	}
	// 	return element;
	// },
	// 飞机大战
	createElement(type) {
		let element = null;
		switch (type) {
			case "Container":
				element = new Container();
				break;
			case "Sprite":
				element = new Sprite();
				break;
			default:
				element = document.createElement('div');
				break;
		}
		return element;
	},
	setElementText(node, text) {
		// 缩写时，这个 Text 有讲究，是快捷方式，要索引到 pixi.js 的 Text 方法才是正确的
		const cText = new Text(text)
		// console.log(cText);
		// Cannot set property '_parentID' of undefined
		node.addChild(cText);
	},
	// hostCreateText is not a function
	createText(text) {
		return new Text(text)
	},
	createComment(text) {
		return new Text(text)
	},
	patchProp(el, key, prevValue, nextValue) {
		// pixi
		// <rect x=100 >
		// el[key] = nextValue;
		switch (key) {
			// 解析精灵图路径
			case "texture":
				el.texture = Texture.from(nextValue);
				break;
			// 可以设置元素(精灵图)宽高
			case "width":
				el.width = nextValue;
				break;
			case "height":
				el.height = nextValue;
				break;
			// 解析事件
			case "onClick":
				el.on("pointertap", nextValue);
				break;
			default:
				el[key] = nextValue;
				break;
		}
	},
	insert(el, parent) {
		// parent 就是 game 的画布舞台根容器，Game.js 中的 game.stage
		// console.log(el);
		// console.log(parent);
		// 类似于 docoment.body.append 把图形加入到根容器(舞台)
		// 官方文档有 app.stage.addChild(sprite); 因此推测 sprite 可以当成 el:RendererNode 一样，视为一个渲染结点
		parent.addChild(el);
	},
	// 新加
	parentNode() { },
	nextSibling() { },
	remove(el) {
		const parent = el.parent;
		if (parent) {
			parent.removeChild(el)
		}
	},
})

export function createApp(rootComponent) {
	return renderer.createApp(rootComponent)
}